<template>
    <div class="modify-password-wrapper">
        <div class="modify-password-container">
            <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-8">
                <!-- 页面标题 -->
                <div class="text-center mb-3">
                    <h2 class="text-2xl font-bold text-gray-700 mb-2">修改密码</h2>
                    <p class="text-gray-500 text-sm">为了账户安全，请定期更换密码</p>
                </div>

                <!-- 表单部分 -->
                <el-form 
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-position="top"
                    class="space-y-6"
                >
                    <!-- 原密码 -->
                    <el-form-item label="原密码" prop="oldPassword">
                        <el-input
                            v-model="form.oldPassword"
                            type="password"
                            show-password
                            :prefix-icon="Lock"
                            placeholder="请输入原密码"
                        />
                    </el-form-item>
                    <!-- 新密码 -->
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input
                            v-model="form.newPassword"
                            type="password"
                            show-password
                            :prefix-icon="Lock"
                            placeholder="请输入新密码"
                        />
                        <!-- 密码规则提示 -->
                        <div class="mt-1 text-xs text-gray-400">
                            密码必须包含大小写字母和数字，长度6-16位
                        </div>
                        <!-- 密码强度指示器 -->
                        <div class="mt-2 flex items-center gap-2">
                            <div class="text-xs text-gray-500">密码强度：</div>
                            <div class="flex-1 flex gap-1">
                                <div 
                                    v-for="(item, index) in 3" 
                                    :key="index"
                                    class="h-1 flex-1 rounded-full transition-all duration-300"
                                    :class="[
                                        passwordStrength >= index + 1 
                                            ? strengthColors[passwordStrength - 1] 
                                            : 'bg-gray-200'
                                    ]"
                                ></div>
                            </div>
                            <div class="text-xs" :class="strengthTextColors[passwordStrength - 1]">
                                {{ strengthTexts[passwordStrength - 1] }}
                            </div>
                        </div>
                    </el-form-item>
                    <!-- 确认新密码 -->
                    <el-form-item label="确认新密码" prop="confirmPassword">
                        <el-input
                            v-model="form.confirmPassword"
                            type="password"
                            show-password
                            :prefix-icon="Lock"
                            placeholder="请再次输入新密码"
                        />
                    </el-form-item>
                    <!-- 提交按钮 -->
                    <el-form-item class="mt-8">
                        <el-button 
                            type="primary" 
                            class="w-full submit-btn"
                            :loading="loading"
                            @click="handleSubmit"
                        >
                            确认修改
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'

const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

// 表单数据
const form = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

// 密码强度相关配置
const strengthColors = ['bg-red-500', 'bg-yellow-500', 'bg-green-500']
const strengthTextColors = ['text-red-500', 'text-yellow-500', 'text-green-500']
const strengthTexts = ['弱', '中', '强']

// 计算密码强度
const passwordStrength = computed(() => {
    const password = form.value.newPassword
    if (!password) return 1
    
    let strength = 0
    // 检查长度
    if (password.length >= 8) strength++
    // 检查是否包含数字和字母
    if (/[0-9]/.test(password) && /[a-zA-Z]/.test(password)) strength++
    // 检查是否包含特殊字符
    if (/[!@#$%^&*]/.test(password)) strength++
    
    return Math.min(strength + 1, 3)
})

// 表单验证规则
const rules = {
    oldPassword: [
        { required: true, message: '请输入原密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度在6-16个字符之间', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度在6-16个字符之间', trigger: 'blur' },
        { 
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/,
            message: '密码必须包含大小写字母和数字',
            trigger: 'blur'
        }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== form.value.newPassword) {
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return
    
    try {
        await formRef.value.validate()
        loading.value = true
        
        // TODO: 调用修改密码接口
        await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟接口调用
        
        ElMessage.success('密码修改成功，请重新登录')
        localStorage.removeItem('token')
        router.push('/login')
    } catch (error) {
        if (error.message) {
            ElMessage.error(error.message)
        }
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>

</style>


